<template>
	<el-row style="margin-top: 10px;">
		<el-col :span="2">
			<el-menu :default-active="activeIndex" class="menu" router>
				<el-menu-item :index="item.attributes.url" :key="item.id" v-for="item in getMenu">{{item.text}}</el-menu-item>
			</el-menu>
		</el-col>
		<el-col :span="22" style="height: 100%;overflow: auto;padding:0 10px">

			<router-view></router-view>

		</el-col>
	</el-row>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				activeIndex: this.$route.path,
			};
		},
		computed: {
			...mapGetters(['getMenu']),
		},
		methods: {

		}

	}
</script>

<style scoped>
	.menu {
		background-color: #fff;
		text-align: center;
	}
	
	.el-menu-item.is-active {
		color: #20a0ff;
		background-color: #d1dbe5;
	}
</style>